<template>
	<view class="tab" :style="{paddingBottom: safeBottom + 'px'}">
		<view v-for="(item,index) in tabBarList" :key="index" class="tab-item" @click="switchTab(item, index)">
			<image class="tab_img" :src="selectedIndex == index ? item.selectedIconPath : item.iconPath"></image>
			<view v-if="type ==='user' && index==1 && totalCount !=0" class="count" :key="totalCount" >{{totalCount}}</view>
			<view class="tab_text" :style="{color: selectedIndex == index ? selectedColor : color}">{{item.text}}</view>
		</view>
	</view>
</template>

<script>
	
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex';
	export default {
		props: {
			selectedIndex: { // 当前选中的tab index
				default: 0
			},
		},
		computed: {
			...mapGetters([
				'tabBarList',
				'role',
				'isCreateBool',
				'cartCount'
			]),
			totalCount:function(){
				console.log('computed:',this.cartCount)
				return this.cartCount
			}
		},
		
		data() {
			return {
				color: "#001F42",
				selectedColor: "#001F42",
				list: [],
				currentIndex: 0,
				safeBottom: 20,
				count:0,
				updateBool:false,
				type:null
			}
		},
	
		created() {
			console.log('tabs created')
			uni.hideTabBar();
			this.currentIndex = this.selectedIndex;
			this.type = this.$store.getters.role;
			console.log(typeof this.currentIndex,this.type)

			if(this.type ==='user'  && this.currentIndex==='0'){
				console.log(this.isCreateBool)
				uni.switchTab({
					url:'../plat-menu/index'
				})
				if(!this.isCreateBool){
					this.setIsCreateBool(true);
					uni.$on('updateGoodCount',this.updateCart);
				}
				 this.updateCart()
			}
			if(this.type ==='delivery'  && this.currentIndex===0){
				uni.redirectTo({
					url:'../plat-menu/delivery'
				})
			}
		},
		onLoad() {
			console.log('tabs onLoad')
			
			// const platform = uni.getSystemInfoSync().platform;
			//     if (platform === 'android') {
			//       // 获取系统信息
			//       const safeArea = uni.getSystemInfoSync().safeAreaInsets;
			//       // 设置底部安全距离
			//       this.safeBottom = safeArea.bottom;
			// 	  console.log(this.safeBottom)
			//     }
		},
		
		onPageHide() {
			//uni.$off('updateGoodCount');
			//console.log('onPageHide')
			
			
		},
		mounted() {
			//console.log('tabbar mounted')
			
		},
		methods: {
			...mapMutations(['setCartCount','setIsCreateBool']),
			 updateCart(){
				const that = this;
				this.$API.countCart().then(res =>{
					that.setCartCount(res.count);
				
					
					
				}).catch(()=>{
					
				});
			},
			switchTab(item, index) {
				this.currentIndex = index;
				let url = item.pagePath;
				uni.switchTab({
					url: url,
					success() {

					},
					fail() {
						
						uni.redirectTo({
							url: url
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.tab {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 90rpx;
		background: white;
		display: flex;
		justify-content: center;
		align-items: center;
		// height: calc(90rpx + constant(safe-area-inset-bottom));
		// height: calc(90rpx + env(safe-area-inset-bottom));
		padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
		z-index: 99;
		// bottom: calc(var(--window-bottom)+20px);
		.tab-item {
			flex: 1;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			margin-top:30rpx;
			position: relative;
			.tab_img {
				width: 42rpx;
				height: 42rpx;
			}

			.tab_text {
				font-size: 24rpx;
				margin-top: 0rpx;
			}
			.count{
				width: 38rpx;
				height: 26rpx;
				background: #FF3133;
				border-radius: 16rpx;
				    color: #fff;
				    position: absolute;
				  top: -5rpx;
				      right: 52rpx;
				    font-size: 20rpx;
					line-height: 25rpx;
			}
		}
	}
</style>